<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { useI18n } from '@/hooks/web/useI18n'
import { createImageViewer } from '@/components/ImageViewer'
import { createVideoViewer } from '@/components/VideoPlayer'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { delBatchPlStudyPlanApi, getPlStudyPlanPageListApi } from '@/api/studyPlan/video'
import { reactive, unref, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElTag, ElButton, ElMessage, ElSwitch, ElRow, ElCol } from 'element-plus'
import { useTable } from '@/hooks/web/useTable'
import axios from 'axios'

const addVideoDetailModel = ref()
const editVideoDetailModel = ref()
const { push } = useRouter()
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import VideoPlanDetailModel from '@/views/StudyPlan/videoPlan/components/videoPlanDetailModel.vue'
import EditVideoPlanModel from '@/views/StudyPlan/videoPlan/components/editVideoPlanModel.vue'
import AddVideoPlanModel from '@/views/StudyPlan/videoPlan/components/addVideoPlanModel.vue'
import AudioPlanDetailModel from '@/views/StudyPlan/videoPlan/components/audioPlanDetailModel.vue'

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getPlStudyPlanPageListApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...searchParams.value
    })
    return {
      list: res.data.records,
      total: res.data.total
    }
  },
  fetchDelApi: async () => {
    let boo = false
    const a = {}
    a['idsList'] = ids.value
    const res = await delBatchPlStudyPlanApi(a)
    if (res.code == '00000') {
      boo = true
    }
    return boo
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, setProps, refresh, getElTableExpose, delList } = tableMethods
const searchParams = ref({})
const setSearchParams = (params: any) => {
  params.name = params.name
  searchParams.value = params
  getList()
}
const columns = reactive<CrudSchema[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index',
    align: 'center',
    headerAlign: 'center',
    search: {
      hidden: true
    }
  },
  {
    field: 'name',
    headerAlign: 'center',
    align: 'center',
    label: '名称',
    search: {
      component: 'Input'
    },
    form: {
      component: 'Input',
      colProps: {
        span: 24
      },
      detail: {
        span: 24
      }
    }
  },
  {
    field: 'defaultFlag',
    label: '是否默认',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center',
    slots: {
      default: (data: any) => {
        return (
          <>
            <ElTag type={data.row.defaultFlag === 0 ? 'success' : 'danger'}>
              {data.row.defaultFlag === 0 ? '是' : '否'}
            </ElTag>
          </>
        )
      }
    }
  },

  {
    field: 'type',
    label: '类型',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center',
    slots: {
      default: (data: any) => {
        return (
          <>
            <ElTag
              type={
                data.row.type === '0' ? 'danger' : data.row.type === '1' ? 'success' : 'warning'
              }
            >
              {data.row.type === '0' ? '视频' : data.row.type === '1' ? '音频' : '音频/视频'}
            </ElTag>
          </>
        )
      }
    }
  },
  {
    field: 'status',
    label: '状态',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center',
    slots: {
      default: (data: any) => {
        return (
          <ElTag type={data.row.status === 0 ? 'danger' : 'success'}>
            {data.row.status === 0 ? '禁用' : '启用'}
          </ElTag>
        )
      }
    }
  },
  {
    field: 'adPercentage',
    headerAlign: 'center',
    align: 'center',
    search: { hidden: true },
    label: '广告占比'
  },
  {
    field: 'action',
    align: 'center',
    width: '200px',
    headerAlign: 'center',
    label: '操作',
    search: { hidden: true },
    slots: {
      default: (data: any) => {
        return (
          <>
            <ElButton type="primary" style="padding:0px" text onClick={() => editAction(data.row)}>
              编辑
            </ElButton>
            <ElButton type="danger" style="padding:0px" text onClick={() => delData(data.row)}>
              删除
            </ElButton>
            <ElButton type="success" style="padding:0px" text onClick={() => action(data.row)}>
              详情
            </ElButton>
          </>
        )
      }
    }
  }
])

const { allSchemas } = useCrudSchemas(columns)
const videoPlanDetailModel = ref()
const audioPlanDetailModel = ref()
const editVideoPlanModel = ref()
const addVideoPlanModel = ref()
const action = (row) => {
  const typeArr = row.type.toString().split(',')
  if (!typeArr.includes('1')) {
    videoPlanDetailModel.value.isShowVideoPlanDetailModel(row)
  }
  if (typeArr.includes('1')) {
    audioPlanDetailModel.value.isShowVideoPlanDetailModel(row)
  }
}
const editAction = (row) => {
  editVideoPlanModel.value.isShowModel(row)
}
const AddAction = () => {
  const row = {}
  row['status'] = 1
  row['adPercentage'] = 0
  addVideoPlanModel.value.isShowModel(row)
}
const onSearch = (value) => {
  getList()
}
const delLoading = ref(false)
const ids = ref<string[]>([])
const delData = async (row) => {
  console.log(row, 'row')
  const elTableExpose = await getElTableExpose()
  ids.value = row ? [row.id] : elTableExpose?.getSelectionRows().map((v) => v.id) || []
  delLoading.value = true
  await delList(unref(ids).length).finally(() => {
    delLoading.value = false
  })
}
</script>

<template>
  <ContentWrap>
    <ElRow>
      <ElCol :span="22">
        <Search
          :schema="allSchemas.searchSchema"
          @search="setSearchParams"
          @reset="setSearchParams"
        />
      </ElCol>
      <ElCol :span="2">
        <ElButton style="margin-bottom: 18px" type="primary" @click="AddAction">添加</ElButton>
      </ElCol>
    </ElRow>
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      showAction
      :columns="allSchemas.tableColumns"
      :data="dataList"
      row-key="id"
      :loading="loading"
      sortable
      :pagination="{
        total: total
      }"
      @register="tableRegister"
      @refresh="refresh"
    />
  </ContentWrap>
  <VideoPlanDetailModel ref="videoPlanDetailModel" />
  <AudioPlanDetailModel ref="audioPlanDetailModel" />
  <EditVideoPlanModel ref="editVideoPlanModel" />
  <AddVideoPlanModel ref="addVideoPlanModel" />
</template>
